<template>
	<view>
		<!-- pages/mall/mall.wxml -->
		<view class="mall">
			<view class="search">
				<view class="search_container">
					<image class="search_icon" @tap="onSearch" src="/static/pages/image/search_icon.png"
						mode="widthFix">
					</image>
					<input class="search_input" @click="toSearch" disabled @input="bindKeyInput" @blur="onSearch" placeholder="请输入搜索内容"
						:value="search" placeholder-style="color: #ACACAC;">
				</view>
			</view>

			<!-- <swiper class="swiper"  :indicator-dots="true" :autoplay="true" :interval="3000" indicator-active-color="#FFF">
					<swiper-item v-for="item in banner_list" :key="item.id">
						<image :src="item.img_patch" mode="" class="swiper_image"></image>
					</swiper-item>
				</swiper> -->

			<view class="classify">
				<view class="classify_item" v-for="item in goods_type" :key="item.id" @click="toGoodList(item.id)">
					<image class="item_image" :src="item.image" mode=""></image>
					<text class="item_name">{{item.name}}</text>
				</view>

				<view class="classify_item" @click="toCategory">
					<image class="item_image" src="../../static/pages/image/classify.png" mode=""></image>
					<text class="item_name">更多分类</text>
				</view>
			</view>
			<!-- <image class="head" src="https://www.hunanlongyun.com/attachment/images/market/10/595/cars/cars35766092871f0d713248da6bbe02b16a.png" mode="widthFix"></image> -->

			<!-- 		<view class="tab_bar">
					<scroll-view scroll-x="true">
						<view class="tabBar_container">
							<view v-for="(item, index) in tab_list" :key="index"
								:class="'item ' + (isActive == item.id ? 'avtive' : '')" :data-id="item.id"
								@tap="onChangeActive">
								<text class="item_lab">{{item.name}}</text>
								<view class="item_line" :style="isActive == item.id? '' : 'width:0;'"></view>
							</view>
						</view>
					</scroll-view>
				</view> -->

			<view class="commodity">
					<!-- <view class="sort_content" @click="changeOrder">
						<text class="sort_txt">{{order == 'asc' ? '价格升序' : '价格降序'}}</text>
						<image class="sort_icon" src="/static/pages/image/sort.png" mode=""></image>
					</view> -->
					
					<view class="merchantList_list">
						<view class="merchantList_item" v-for="item in commodity_list" :key="item.id"   @click="toMerchantDetails(item.id)">
							<view class="item_left">
								<image class="image" :src="item.shop_image" mode=""></image>
								<view class="content">
									<view class="content_top">
										<view class="title_content">
											<text class="title">{{item.shop_name}}</text>
											<image class="title_icon" src="/static/pages/image/area_right.png" mode="widthFix"></image>
										</view>
										<view class="item_container">
											<view class="sunui_star">
												<view class="sunui_star_content">
													<SunuiStar :starSize='"0.5em"' :defaultStar="3" :disabledStar="true" />
												</view>
												<text class="sunui_star_txt">4.5</text>
											</view>
											<text class="sales sales_txt">月销{{item.sold_count}}</text>
										</view>
									</view>
									
									<text class="sales">{{item.introduction}}</text>
								</view>
							</view>
							<!-- <button class="item_right" type="default">进店</button> -->
						</view>
					</view>
					<!-- <view class="commodity_list">
						<view v-for="(item, index) in commodity_list" :key="index" class="commodity_item" :data-id="item.id"
							@tap="toDetails">
							<image class="item_img" :src="filter.getImageFile(item.image)[0]" mode></image>
							<view class="item_content">
								<text class="item_title">{{item.title || '-'}}</text>
								<view class="item_box">
									<view class="box_left">
										<view class="box_money">
											<text class="money_symbol">¥</text>
											<text class="money_txt">{{item.sell_price}}</text>
										</view>
										<text class="box_sales">月销{{item.sold_count}}件</text>
									</view>
								</view>
							</view>
							<view class="looksex">立即抢购</view>
						</view>
					</view> -->
				</view>

			<!-- 	<view class="more">
					<image @click="toShoppingTrolley" class="more_mall_select.png" src="../../static/pages/image/mall_select.png" mode="widthFix"></image>
					<image @click="toCategory" class="more_classify" src="../../static/pages/image/all.png" mode="widthFix"></image>
				</view>
				 -->

			

		<load-more :load="load" @onMore="onMore"></load-more>



	</view>
	<view-tabbar :current="0"></view-tabbar>

	</view>

</template>

<script module="filter" lang="wxs" src="../../we7/resource/js/tools.wxs"></script>

<script>
	// pages/mall/mall.js
	var app = getApp();
	import loadMore from "../../components/load-more/load-more";
	import Tabbar from '@/pagesA/tabber/tabber.vue'
	import SunuiStar from '@/components/sunui-star/sunui-star.vue'
	export default {
		components: {
			'view-tabbar': Tabbar,
			SunuiStar
		}, 
		data() {
			return {
				isActive: -1,
				tab_list: [{
					name: '推荐',
					id: -1
				}],
				commodity_list: [],
				pageNum: 1,
				// loading noMore more
				load: 'noMore',
				search: '',
				goods_type: [],
				banner_list: [],
				order: 'asc'
			};
		},

		components: {
			loadMore,
			'view-tabbar': Tabbar
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},

		onTabItemTap(e) {
			console.log(e);
			if (e.index == 2) {
				console.log("点击了商城");
				uni.redirectTo({
					url: '/pages/tabber/a'
				})
				// uni.hideTabBar({

				// })
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.setData({
				load: 'more',
				pageNum: 1,
				commodity_list: []
			});
			this.getGoodsType();
			this.getGoodsList();
			this.getBanner()
			// uni.hideTabBar({
			// 	animation: false
			// })
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			toSearch(){
				uni.navigateTo({
					url:'/pagesA/search/search'
				})	
			},
			toGoodList(id){
				uni.navigateTo({
					url:'/pagesA/goodList/goodList?id=' + id
				})
			},
			toMerchantDetails(id){
				uni.navigateTo({
					url:'../merchantDetails/merchantDetails?id=' + id
				})
			},
			changeOrder() {
				this.order = this.order == 'asc' ? 'desc' : 'asc'
				this.getGoodsList()
			},
			toShoppingTrolley() {
				uni.navigateTo({
					url: '/pagesA/shoppingTrolley/shoppingTrolley'
				})
			},
			getBanner() {
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "home.index.home1"
					},
					success: res => {
						this.banner_list = res.data.data.banner
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},
			onMore() {
				if (this.load != 'more') return;
				this.getGoodsList();
			},

			bindKeyInput(event) {
				this.setData({
					search: event.detail.value
				});
			},

			// 搜索
			onSearch() {
				wx.showLoading({
					title: '加载中'
				});
				this.setData({
					pageNum: 1,
					commodity_list: []
				});
				this.getGoodsList();
				// app.globalData.util.request({
				// 	url: "entry/wxapp/Api",
				// 	data: {
				// 		m: "monai_market",
				// 		r: "goods.index.search",
				// 		leftid: this.pageNum,
				// 		search: this.search
				// 	},
				// 	success: res => {
				// 		let {
				// 			commodity_list
				// 		} = this;
				// 		this.setData({
				// 			commodity_list: commodity_list.concat(res.data.data)
				// 		});
				// 		wx.hideLoading();
				// 	},
				// 	fail: res => {
				// 		wx.hideLoading();
				// 	}
				// });
			},

			// 改变选中
			onChangeActive(event) {
				const id = event.currentTarget.dataset['id'];
				this.setData({
					isActive: id,
					pageNum: 1,
					commodity_list: []
				});
				this.getGoodsList();
			},

			// 详情
			toDetails(event) {
				wx.navigateTo({
					url: '/pagesA/productDetails/productDetails?id=' + event.currentTarget.dataset['id']
				});
			},

			// 获取商品分类 
			getGoodsType() {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.goods_type"
					},
					success: res => {
						let goods_type = [{
							name: '推荐',
							id: -1
						}];
						this.goods_type = res.data.data
						goods_type = goods_type.concat(res.data.data);
						this.setData({
							tab_list: goods_type
						});
					},
					fail: res => {}
				});
			},

			// 获取商品列表
			getGoodsList() {
				this.setData({
					load: 'loading'
				});
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "shop.index.shoplist",
						shop_name:this.search,
						leftid:this.pageNum,
						uid:uni.getStorageSync('uid')
						// m: "monai_market",
						// r: "goods.index.index",
						// shop_type_id: this.isActive,
						// leftid: this.pageNum,
						// order: this.order
					},
					success: res => {
						let {
							commodity_list
						} = this;
						let load = 'more';
						if (res.data.data.length < 6) load = 'noMore';
						this.setData({
							load,
							pageNum: this.pageNum + 1,
							commodity_list: commodity_list.concat(res.data.data)
						});
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},

			// 滑动到底部事件
			bindscrolltolower(event) {
				console.log('底部');
			},

			toCategory() {
				uni.navigateTo({
					url: '/pagesA/tabber/b'
				})
			}
		}
	};
</script>
<style lang="scss">
	@import "/pages/mall/mall.css";

	.swiper {
		padding: 0 31upx;
		box-sizing: border-box;
	}

	.swiper_image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.classify {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 36upx;
		padding-bottom: 20rpx;
		padding-top: 30rpx;
	}

	.classify_item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.item_image {
			width: 66rpx;
			height: 66rpx;
			margin-bottom: 17rpx;
		}

		.item_name {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.more {
		position: fixed;
		right: 50rpx;
		bottom: 180rpx;
		display: flex;
		flex-direction: column;

		.more_classify {
			margin-top: 20rpx;
			width: 50rpx;
		}

		.more_mall_select {
			width: 50rpx;
		}
	}

	.looksex {
		width: 143rpx;
		height: 64rpx;
		background: linear-gradient(141deg, #0CD8C2, #0BC2AE);
		border-radius: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
		font-size: 26rpx;
		font-weight: 500;
		position: absolute;
		bottom: 43rpx;
		right: 20rpx;
	}


	.sort_content {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;

		.sort_icon {
			width: 32upx;
			height: 32upx;
			margin-left: 5upx;
		}
	}
</style>

<style scoped lang="scss">
	.merchantList_list {
		// padding: 0 28upx 0 24upx;
		box-sizing: border-box;

		.merchantList_item+.merchantList_item {
			margin-top: 16upx;
		}

		.merchantList_item {
			padding: 26upx 10upx 37upx 15upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 30upx;

			.item_left {
				display: flex;
				flex: 1;
				
				.title_content{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 30upx;
					box-sizing: border-box;
				}
				
				.title_icon{
					width: 14upx;
				}
				
				.item_container{
					display: flex;
					align-items: center;
				}
				
				.image {
					width: 241upx;
					height: 241upx;
					border-radius: 10upx;
					margin-right: 20upx;
				}

				.content {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}	

				.sunui_star_content {
					width: 160upx;
				}

				.title {
					font-size: 32upx;
					font-weight: 800;
					color: #242424;
				}

				.sales {
					font-size: 22upx;
					font-weight: 500;
					color: #535353;
				}
				
				.sales_txt{
					margin-left: 20upx;
				}

				.sunui_star {
					display: flex;
					align-items: center;
				}

				.sunui_star_txt {
					font-size: 22upx;
					font-weight: 500;
					color: #535353;
					line-height: 22upx;
				}
			}


			.item_right {
				margin: 0;
				width: 143upx;
				height: 64upx;
				background: linear-gradient(141deg, #0CD8C2, #0BC2AE);
				border-radius: 32upx;
				font-size: 30upx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 64upx;
			}
		}


	}
</style>
